@import "../../../../style/functions";

client-filter-tool {
    height:transVw(150);
    width: 100vw;
    display: block;

    .client-filter-wrapper{
        width:100%;
        height:transVw(150);
        text-align: left;
        position:relative;
        background-color:#fff;
        //box-shadow: 0 0 6vw 0.1vw #eee;
        line-height:transVw(150);

        .sort-way-ddl{
            margin-left: transVw(60);
            font-size:transVw(42);
            color: #333;
            display: inline-block;
            background:none;
            padding:0;
            vertical-align: middle;

            .ddl-icon{
                width:transVw(32);
                height:transVw(32);
                margin-left: transVw(15);
                display:inline-block;
                background:url('../assets/images/client/client-list/arrow-black.png') no-repeat;
                background-size:cover;
                transition:transform 0.3s;

                &.is-unfold{
                    transform:rotateZ(180deg);
                }
            }
        }

    }
    .search-wrapper {
        width: 100%;
        top: 13.889vw;
        height: 20.09vw;
        padding-bottom:3.06vw;
        background-color: #f5f5f5;
        display: flex;
        align-items: flex-end;
        overflow:hidden;
        .search-key-wrapper {
            background: linear-gradient(to right, #63b24c, #018c6e);
            border: none;
            border-radius: 6vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 88.89vw;
            height: 11.57vw;
            margin: 0 auto;
            box-shadow:0 1vw 2vw 0 #ddd;
            i {
                width: 4.5vw;
                height: 4.5vw;
                margin: auto 4.17vw auto 2vw;
                background-image: url(../assets/images/client/client-list/icon_search.png);
                background-size: cover;
                background-repeat: no-repeat;
            }
            input {
                width:74vw;
                height: 7vw;
                margin-left:4.17vw;
                background: none;
                border: none;
                font-size: 3.89vw;
                margin-right: 0;
                color: #fff;
                &::placeholder {
                    color: rgba(255, 255, 255, 0.5);
                }
            }
        }

    }

}
